<template>
    <div class="box">
        <h6>角色列表</h6>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 添加按钮 -->
            <el-button class="btn1" type="primary" @click="addorle">添加角色</el-button>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">

                <el-table-column type="expand">

                    <template slot-scope="scope">
                        <!-- 权限 -->
                        <el-row :gutter="20" v-for="item  in scope.row?.children" :key="item.id">
                            <!-- 一级 -->
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    <el-tag closable>{{ item.authName }}</el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </div>
                            </el-col>
                            <!-- 二级 -->
                            <el-col :span="6">
                                <div class="grid-content bg-purple" v-for="tm in item.children" :key="tm.id">
                                    <el-tag closable type="success">{{ tm.authName }}</el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </div>
                            </el-col>
                            <!-- 三级 -->
                            <el-col :span="6" v-for="tm in item.children" :key="tm.id">
                                <div class="grid-content bg-purple" v-for="me in tm.children" :key="me.id">
                                    <el-tag closable type="warning">{{ me.authName }}</el-tag>
                                </div>
                            </el-col>
                        </el-row>

                    </template>

                </el-table-column>

                <el-table-column type="index" label="#" prop="id">
                </el-table-column>
                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="角色描述" prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作" prop="desc">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-button size="mini" class="el-icon-edit" type="primary"
                            @click="handleEdit(scope.$index, scope.row)">&nbsp;编辑</el-button>
                        <!-- 删除 -->
                        <el-button size="mini" type="danger" class="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)">&nbsp;删除</el-button>
                        <!-- 分配权限 -->
                        <el-button size="mini" class="el-icon-s-tools" type="warning"
                            @click="Edit(scope.$index, scope.row)">&nbsp;分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加用户弹框 -->
            <el-dialog :title="this.addEdit ? '添加用户' : '编辑用户'" :visible.sync="dialogVisible" width="30%"
                :before-close="handleClose">
                <!-- 表单验证 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="ruleForm.roleName"></el-input>
                    </el-form-item>

                    <el-form-item label="角色描述" prop="roleDesc">
                        <el-input v-model="ruleForm.roleDesc"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('ruleForm')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 删除提示框 -->
            <el-dialog title="提示" :visible.sync="dele" width="30%" :before-close="handleClose">
                <span>确定要删除吗?</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deles1">取 消</el-button>
                    <el-button type="primary" @click="deles2">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 权限分配框 -->
            <el-dialog title="分配权限" :visible.sync="assignment" width="90%" :before-close="handleClose">
                <!-- 二级权限 -->
                <el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current>
                </el-tree>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="assignment = false">取 消</el-button>
                    <el-button type="primary" @click="assignment = false">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
// 权限请求
import { Permissions, addrl, Editrold, Del } from '../request/Api'
export default {
    data() {
        return {

            // 权限分配弹出框
            assignment: false,
            // 删除弹出框
            dele: false,
            // 添加编辑框
            addEdit: true,
            // 表单验证
            ruleForm: {
                roleDesc: '',
                roleName: ''
            },
            rules: {
                roleName: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                ],
                roleDesc: [
                    { required: true, message: '请输入用户描述', trigger: 'blur' },
                ],
            },
            // 表格
            tableData: [{
                roleDesc: '',
                roleName: '',
            }],
            // 添加用户表格
            dialogVisible: false,
            // 修改框内容
            Editss: [],
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            },]
        }
    },
    created() {
        this.getlist()
    },
    methods: {
        getlist() {
            // 页面渲染
            Permissions().then(res => {
                this.tableData = res.data.data
            })
        },

        // 表单验证
        submitForm(formName) {
            if (this.addEdit) {
                // 添加用户
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false
                        addrl({ roleName: this.ruleForm.roleName, roleDesc: this.ruleForm.roleDesc }).then(res => {
                            this.getlist()
                        })
                        this.$message({
                            message: '恭喜你添加成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('添加失败!');
                        return false;
                    }
                });
            } else {
                // 修改用户
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false
                        Editrold({ roleName: this.ruleForm.roleName, roleDesc: this.ruleForm.roleDesc, id: this.Editss.id }).then(res => {
                            this.getlist()
                        })
                        console.log(this.Editss.id);
                        this.$message({
                            message: '恭喜你修改成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('修改失败!');
                        return false;
                    }
                });
            }

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
        },
        // 确定添加
        addorle() {
            this.roleName = ''
            this.roleDesc = ''
            this.dialogVisible = true
        },
        // 添加用户弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done()
                })
                .catch(_ => {
                });
        },
        // 编辑
        handleEdit(index, row) {
            // 数据回填
            this.ruleForm.roleName = row.roleName
            this.ruleForm.roleDesc = row.roleDesc
            this.dialogVisible = true
            this.addEdit = false
            this.Editss = row
        },
        // 删除确认框
        handleDelete(index, row) {
            this.dele = true
            // console.log(index, row.id);
            Del({ id: row.id }).then(res => {
                // console.log(res);

            })
        },
        // 删除取消
        deles1() {
            this.dele = false
            this.$message.error('删除失败!');
        },
        // 删除确定
        deles2() {
            this.dele = false
            this.$message({
                message: '恭喜你删除成功!',
                type: 'success'
            });
            this.getlist()
        },
        // handleClose(done) {
        //     this.$confirm('确认关闭？')
        //         .then(_ => {
        //             done();
        //         })
        //         .catch(_ => { });
        // },
        // 权限分配
        Edit(index, row) {
            console.log(index, row);
            this.assignment = true
        }
    },
}
</script>
<style lang="scss" scoped>
// 权限
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

// 表格
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

// 卡片
.box-card {
    width: 96%;
    margin: 25px auto;

    // 添加按钮
    .btn1 {
        margin: 10px;
        float: left;
    }
}
</style>